<template>
  <div class="login">
    <div class="form_container">
      <p class="form_title">Vue CLI4 + Vue3 + TypeScript + Antd</p>
      <div class="form_submit">
        <a-form
          ref="loginFrom"
          :model="formModel"
          :rules="formRules"
          :wrapper-col="{ span: 24 }"
        >
          <a-form-item ref="userCode" name="userCode">
            <a-input
              v-model:value="formModel.userCode"
              placeholder="账号：admin"
              :allowClear="true"
            />
          </a-form-item>
          <a-form-item ref="password" name="password">
            <a-input
              v-model:value="formModel.password"
              placeholder="密码：123456"
              :allowClear="true"
            />
          </a-form-item>
          <a-form-item>
            <a-button
              class="ant_btn"
              type="primary"
              @click="handleClick"
              :loading="loading"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <login-bg></login-bg>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
  Ref,
} from "vue";
import { useStore } from "vuex";
import { loginApi } from "@/api/login";
import { useRouter } from "vue-router";
import LoginBg from "@/components/LoginBg/index.vue";

export default defineComponent({
  name: "Login",
  props: {
    loading: {
      type: Boolean,
    },
  },
  components: { LoginBg },
  setup(props, { attrs, slots, emit }) {
    let loading = ref(false);
    const { dispatch, getters } = useStore();
    const $router = useRouter();
    const proxy = getCurrentInstance()?.proxy;

    // form
    const formModel = reactive({
      userCode: "",
      password: "",
    });
    const loginFrom = ref();
    const formRules = {
      userCode: [
        {
          required: true,
          message: "请输入账号 amdin",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "请输入密码 123456", trigger: "blur" },
      ],
    };

    const handleClick = (): void => {
      loginFrom.value
        ?.validate()
        .then(
          async (): Promise<void> => {
            const loginParams = {
              username: formModel.userCode,
              password:  formModel.password,
            };
            loading.value = true;
            const res = await loginApi(loginParams);
            loading.value = false;
            if (res.data.code === 0) {
              dispatch("SET_USERINFO", res.data.data);
              $router.push({ path: "/home" });
              proxy?.$message.success(res.data.msg);
            } else {
              proxy?.$message.error(res.data.msg);
            }
          }
        )
        .catch((err: Error) => {
          loading.value = false;
          console.log("error", err);
        });
    };

    onMounted((): void => {
      console.log(getters.userInfo);
    });

    return {
      handleClick,
      loading,
      formModel,
      loginFrom,
      formRules,
    };
  },
  //
  mounted() {},
});
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  position: relative;
  background-color: $loginBg;
  .form_container {
    position: absolute;
    width: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 20px;
    .form_title {
      position: relative;
      font-size: 24px;
      font-weight: 600;
      z-index: 2;
    }
    .form_submit {
      position: relative;
      width: 50%;
      margin: 0 auto;
      z-index: 2;
      .ant_btn {
        width: 100%;
      }
    }
  }
}
</style>